<template>
    <div id="register">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0px" class="RegisterForm">
            <h3 style="text-align:center;font-size:20px">
            系统注册
            <el-button type="info" @click="toLogin">去登录</el-button>
            </h3>
            <el-form-item label="" prop="username">
            <el-input type="text" v-model="ruleForm.username" class="input" placeholder="请输入用户名" prefix-icon="UserFilled"></el-input>
            </el-form-item>
            <el-form-item label="" prop="password" class="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off" class="input" placeholder="请输入密码" prefix-icon="lock"></el-input>
            </el-form-item>
            <el-form-item label="" prop="checkPass" class="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" class="input" placeholder="请输入确认密码" prefix-icon="lock"></el-input>
            </el-form-item>

            <el-form-item>
            <el-button type="primary" style="width:160px" @click="submitForms('ruleForm')">注册</el-button>
            <el-button color="#E4E7ED" style="width:160px" @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

  <script>
    export default {
        name: 'RegisterView',
      data() {
        var validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            if (this.ruleForm.checkPass !== '') {
              this.$refs.ruleForm.validateField('checkPass');
            }
            callback();
          }
        };
        var validatePass2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.ruleForm.password) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
        return {
          ruleForm: {
            username: '',
            password: '',
            checkPass: '',
          },
          rules: {
            username: [
                { required: true, message: "请输入用户名", trigger: 'blur' },
                { min: 2, max: 9, message: "请输入2到9个字符", trigger: 'blur' }
            ],
            password: [
              { validator: validatePass, trigger: 'blur' }
            ],
            checkPass: [
              { validator: validatePass2, trigger: 'blur' }
            ],
          }
        };
      },
      methods: {
        submitForms() {
            this.$axios.post('/register', this.ruleForm).then(res=>{
                let data = res.data;
                if(data.code == 200){
                    this.ruleForm = {};
                    this.$message({
                        message: "恭喜你，注册成功！",
                        type: "success"
                    })
                }
            })
      },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        toLogin(){
            let _this = this;
            _this.$router.push({path: '/login/'})
        }
      }
    }
  </script>

<style scoped>
#register {
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    margin: 0;
    padding: 0;
}
.input {
  height: 45px;
  color: aqua;
}
.RegisterForm {
  margin: 200px auto;
  border-bottom: 15px;
  background-clip: padding-box;
  padding: 40px 40px 40px 40px;
  width: 450px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.pwd {
  margin-top: 30px;
}
.btn-primary{
  margin-top: 25px;
  height: 45px;
}
</style>